<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='登录' :isTitleStyle="true"></CustomNavbar>
	
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">账号登录</view>
			<uni-section class="container bd20">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="userForm">
					<uni-forms-item label="账号" required name="userName">
						<uni-easyinput v-model="userForm.userName" placeholder="请输入账号" prefixIcon="person" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="userPwd">
						<uni-easyinput v-model="userForm.userPwd" placeholder="请输入密码" prefixIcon="locked" type="password" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiForm')" class="mt20 u-button-normal">提交</button>
				<button type="default" @click="handleReset('valiForm')" class="mt20">重置</button>
			</uni-section>
		</view>
	</view>
	
</template>

<script>
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import { userApi } from '@/utils/api.js'
	import { userInfoStore } from '@/store/userInfo.js'
		
	export default {
		data() {
			return {
				//表单数据
				userForm: {
					userName: '',
					userPwd: '',
				},
				// 校验规则
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					userPwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				},
			}
		},
		components: {
			CustomNavbar
		},
		onLoad() {},
		onReady() {
			//设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.rules)
		},
		methods: {
			submit(ref) {
				console.log(123)
				this.$refs[ref].validate().then(res => {
					console.log(456)
					userApi.login(this.userForm).then(res=>{
						console.log(456)
						if (res) {//表示后台验证通过
						console.log(789)
							setTimeout(function () {
								const store = userInfoStore()
								//更新全局登录信息
								store.token = res.token;
								store.userInfo = JSON.stringify(res.userInfo);
								store.isLogin = true;
								//持久化缓存
								uni.setStorageSync("token",store.token)
								uni.setStorageSync("userInfo",store.userInfo)
								uni.setStorageSync("isLogin",true)
								//跳转【我的】页
								uni.switchTab({
									url: '/pages/my/index'
								})
							},200)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;
		.content {
			width: 600rpx;
			margin: 80rpx auto 0;
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}
			.tips {
				margin-bottom: 60rpx;
				margin-top: 8rpx;
				font-size: 12px;
			}
			.getCaptcha {
				background-color: rgb(253, 243, 208);
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;
				&::after {
					border: none;
				}
			}
			.alternative {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
		.buttom {
			.loginType {
				display: flex;
				padding: 350rpx 150rpx 150rpx 150rpx;
				justify-content:space-between;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					// color: $u-content-color;
					font-size: 28rpx;
				}
			}
			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				.link {
				}
			}
		}
	}
</style>
